// 获取元素
var banner = document.querySelector('.banner');
var ban_ul = banner.querySelector('ul');
var ban_li = ban_ul.querySelectorAll('li')
var ban_p = banner.querySelector('p');
var ban_span = ban_p.querySelectorAll('span');
var last = document.querySelector('.last');
var next = document.querySelector('.next');

// 获取一张图片宽度
var imgW = ban_li[0].clientWidth;

// 创建变量计算距离
var count = 0;

// 创建定时器
var timer = null;



//  一打开就开始执行
timer = setInterval(fn, 2000)



// 移入清除定时器
banner.addEventListener('mouseover', function() {
        clearInterval(timer);
    })
    // 划出添加定时器
banner.addEventListener('mouseout', function() {
    timer = setInterval(fn, 2000)
})

// 下一张，上一张

last.addEventListener('click', function() {
    count--;
    if (count < 0) {
        count = ban_li.length - 1;
    }
    change();
    //  清除所有样式


})

next.addEventListener('click', function() {
    fn();
})






function fn() {
    count++;
    if (count >= ban_li.length) {
        count = 0;
    }
    change();
    //  清除所有样式

}

function change() {
    for (var i = 0; i < ban_li.length; i++) {
        ban_li[i].style.zIndex = 8;
        U.move(ban_li[i], { opacity: 0 })
        U.removeClass(ban_span[i], 'active')

    }
    U.addClass(ban_span[count], 'active')
    U.move(ban_li[count], { opacity: 100 })
    ban_li[count].style.zIndex = 10;
}